@import '_var.scss';

*{
    font-family: 'ktfont';
}

.container{
    @include index-wh;
    background: url(../images/bg-question.png) no-repeat;
    background-size: contain;
    position: relative;
    overflow: hidden;
    .logo{
        @include wh(1.03rem,.38rem);
        background: url(../images/logo.png) no-repeat;
        background-size: contain;
        @include position($t:.45rem,$l:.45rem);
    }
    .portrait-lg{
        @include wh(1.75rem,1.75rem);
        background-color: #fff;
        margin: 0 auto;
        margin-top: 1.16rem;
        position: relative;
        border-radius: 50%;
        margin-bottom: .4rem;
        img{
            display: block;
            @include wh(1.41rem,1.29rem);
            @include v-center;
        }
    }
    .pingjia{
        margin-bottom: .9rem;
        p{
            text-align: center;
            color: #fff;
            font-size: (1rem/3);
            span{
                color: #fff000;
            }
        }
    }
    .firend{
        @include wh(5.62rem,2.63rem);
        margin: 0 auto;
        margin-bottom: .4rem;
        position: relative;
        p{
            color: #fff;
            font-size: .25rem;
            line-height: .30rem;
        }
        @for $i from 1 to 5 {
            .type#{$i}{
                @include wh($w:nth($size-w,$i));
                background-color: nth($colorList, $i);
                border-radius: .5rem; 
                font-size: .2917rem;
                padding: .15rem .2rem;
                span{
                    font-size: .25rem;
                }
            }
        }
        .type1{
            @include position($t:.6rem,$l:3.5rem);
        }
        .type2{
            @include position($t:1.25rem,$l:.4rem);
            font-size: .25rem;
        }
        .type3{
            @include position($t:1.55rem,$l:1.8rem);
        }
        .type4{
            @include position($t:2.05rem,$l:3.5rem);
        }

    }
    .write{
        width: 4.96rem;
        margin: 0 auto;
        p{
            text-align: center;
            font-size: 0.25rem;
            color: #b5b5b5;
            margin: .2rem auto;
        }
        textarea{
            border: .02rem solid #fff;
            background-color: transparent;
            @include wh(4.96rem,.7rem);
            margin: 0 auto;
        }
        .button{
            margin: .2rem auto;
            text-align: center;
            button{
                margin: 0 .225rem;
                @include wh(1.4rem,.47rem);
                border-radius: .1rem;
                background-color: #deff00;
                box-shadow: .05rem .05rem #4e580e;
            }
            .submit{
                background-color: #a7a7a7;
                box-shadow: .05rem .05rem #494949;
            }
        }
    }
    .share{
        @include index-wh;
        background-color: rgba(3, 8, 12, .8);

        @include position($t:0,$l:0);
        .dog{
            @include wh(1.68rem,1.66rem);
            @include position($t:2.90rem,$l:2.3rem);
            img{
                @include wh(1.68rem,1.66rem);
            }
        }
        .pont{
            @include wh(1.26rem,2.02rem);
            @include position($t:1.1rem,$l:4.23rem);
            img{
                @include wh(1.26rem,2.02rem);
            }
        }
        .font{
            width: 100%;
            text-align: center;
            font-size: .375rem;
            color: #d5d5d5;
            @include position($t:5rem);

        }
    }
}
